<link rel="stylesheet" href="/start/layui/css/index.css">
<!-- <script src="/src/lib/extend/echarts.js"></script> -->
<!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
<div class="bg">
    <div id="app" v-cloak>
        <div class="minall">
            <div class="minbox">
                <div class="xbt">车辆总数</div>
                <div class="neirong">{{chrshu.allTotal}}</div>
            </div>
            <div class="minbox">
                <div class="xbt">在线车辆</div>
                <div class="neirong">{{chrshu.onTotal}}</div>
            </div>
            <div class="minbox">
                <div class="xbt">离线车辆</div>
                <div class="neirong">{{chrshu.offTotal}}</div>
            </div>
            <div class="minbox">
                <div class="xbt">异常车辆</div>
                <div class="neirong">{{chrshu.abnormalTotal}}</div>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="gzyj">
            <img style="width: 24px;height: 21.15px;margin-right: 5px;" src="/start/layui/images/gzyj.png" alt=""> 故障待处理
            <!-- 这里，怕出现最后一页数据不够时，分页位置变动的问题，加了一个高度 -->
            <div>
                <!-- style="min-height: 420px;"-->
                <table class="layui-table tab" lay-skin="line">
                    <colgroup>
                        <col width="20%">
                        <col width="15%">
                        <col width="15%">
                        <col width="40%">
                    </colgroup>
                    <!-- <thead>
				<tr>
					<th>昵称</th>
					<th>加入时间</th>
					<th>签名</th>
				</tr>
			</thead> -->
                    <tbody>
                        <tr v-for='item in info'>
                            <td><i class="layui-icon layui-icon-circle-dot" style="font-size: 20px !important;color: #F87C7E;"></i><span style="margin-left: 14px;">{{item.optTime}}</span></td>
                            <td>车辆编号:<span style="color: #06B991;">{{item.agvId}}</span></td>
                            <td>故障码:<span style="color: #06B991;">{{item.code}}</span></td>
                            <!-- <td>处理人员<span style="color: #06B991;">{{item.operator}}</span></td> -->
                            <td>故障描述:<span>{{item.remark}}</span></td>
                        </tr>

                    </tbody>

                </table>
            </div>

            <div id="demo5" style="text-align: center;"></div>
        </div>

    </div>
    <!-- <div class="mrsyqk"> -->
    <!-- <div class="meiri">每日使用情况</div> -->
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <!-- <div id="main" style="width: 90%;height:400px;"></div> -->

    <!-- </div> -->
    <!-- <div class="tubox">
        <div id="main" class="tu"></div>
    </div> -->
</div>
<!-- <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        color: ['#06B991'],
        title: {
            text: '每日使用情况'
        },
        tooltip: {},
        legend: {
            data: []
        },
        xAxis: {
            name: '时间',
            data: ["08/30", "08/31", "09/01", "09/02", "09/03", "09/04", "09/01", "09/02", "09/03", "09/04", "09/01", "09/02", "09/03", "09/04", "08/31", "09/01", "09/02"],
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '使用车辆 / 辆',
            min: 0,
            max: 600,
            axisLabel: {
                formatter: function(value) {
                    var texts = [];
                    console.log(value)
                    if (value == 1) {
                        texts.push('I');
                    } else if (value == 120) {
                        texts.push('200');
                    } else if (value == 240) {
                        texts.push('300');
                    } else if (value == 360) {
                        texts.push('400');
                    } else if (value == 480) {
                        texts.push('500');
                    } else if (value == 600) {
                        texts.push('600');
                    } else if (value == 0) {
                        texts.push('0');
                    }
                    return texts;
                }
            }
        },
        series: [{
            type: 'bar',
            data: [150, 200, 360, 100, 100, 200, 200, 306, 100, 100, 200, 200, 300, 100, 100, 209, 209],
            barWidth: 20,
            itemStyle: {
                normal: {
                    //柱形图圆角，初始化效果
                    barBorderRadius: [6, 6, 0, 0],

                }
            },
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script> -->
<script src="/start/vue.js"></script>
<script>
    layui.use('console', layui.factory('console'));
    layui.use(['admin', 'form', 'carousel', 'laypage'], function() {

        var $ = layui.$,
            admin = layui.admin,
            carousel = layui.carousel,
            element = layui.element,
            setter = layui.setter,
            laypage = layui.laypage,
            form = layui.form,
            device = layui.device()

        new Vue({
            el: '#app',
            data: {
                info: [], //放数据就放数据，不要把请求的数据也放进去
                shuju: { //这里放请求的数据
                    pageNum: 1,
                    pageSize: 10,
                },
                chrshu: []
            },
            //计算
            computed: {

            },
            //初始调用
            created() {
                var that = this
                that.getData()
                admin.req({
                    url: setter.request.baseUrl + "agv-home/target",
                    data: JSON.stringify({}),
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json;charset=UTF-8",
                    done: function(res) {
                        console.log('1212121')
                        console.log('数据', res.msg)
                        that.chrshu = res.info
                        if (res.msg == '您还未登录，请先登录！') {

                            window.location.href = "/user/login"
                        }
                    },
                    error: function(res) {
                        console.log('数据', res.msg)
                        console.log('登录失效')
                            // window.location.href = "/user/login"
                    }
                });
            },
            methods: {
                getData() {
                    //调速参数(查询)
                    var that = this
                    let date = new Date();
                    let dateYear = date.getFullYear();
                    let dateMonth = date.getMonth() + 1;
                    let dateDate = date.getDate();
                    let dateHours = date.getHours();
                    let dateMinutes = date.getMinutes();
                    let dateSeconds = date.getSeconds();
                    console.log('时间：', dateYear + '-' + dateMonth + '-' + dateDate + ' ' + dateHours + ':' + dateMinutes + ':' + dateSeconds)
                    admin.req({
                        url: setter.request.baseUrl + "agv-alarm/query",
                        data: JSON.stringify({
                            pageNum: that.shuju.pageNum,
                            pageSize: that.shuju.pageSize
                        }),
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=UTF-8",
                        done: function(res) {
                            console.log(res)
                            that.info = res.info; //获取到的数据
                            console.log(that.info)
                            laypage.render({
                                elem: 'demo5',
                                count: res.pageResponseDTO.total,
                                curr: that.shuju.pageNum,
                                limit: that.shuju.pageSize,
                                jump: function(obj, first) {
                                    if (!first) {
                                        that.shuju.pageNum = obj.curr;
                                        that.getData()
                                    }
                                }
                            });
                        },

                    });
                }
            }
        })


        $('.layui-btn.layuiadmin-btn-useradmin').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>